<template>
  <div class="home-panel">
    <close-button />
    <div class="home-panel-center">
      <cg-button color="#00776ee6" @click="routeAction('/game/new')">新建游戏</cg-button>
      <cg-button color="#00776ee6" @click="routeAction('/continue')">继续游戏</cg-button>
      <cg-button color="#00776ee6" @click="routeAction('/data')">数据设置</cg-button>
      <cg-button color="#00776ee6" @click="routeAction('/continue')">系统设置</cg-button>
      <cg-button color="#00776ee6" @click="routeAction('/editor')">编辑模式</cg-button>
      <cg-button color="#00776ee6" @click="routeAction('/mini')">代码仓库</cg-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import closeButton from '../../common/components/close-button.vue'

import { useRouter } from 'vue-router'

defineOptions({
  name: 'home-panel'
})

const router = useRouter()

const routeAction = (name: string) => router.push(name)
</script>

<style lang="scss">
.home-panel {
  display: flex;
  flex-direction: column;
  text-align: center;
  flex: 1;
  justify-content: center;

  .home-panel-center {
    width: 50vw;
    display: inline-block;

    .cg-button {
      display: block;
      font-size: 1rem;
      width: 100%;
    }

    .cg-button + .cg-button {
      margin-top: 1rem;
    }
  }
}
</style>
